<template>
  <div class="singerdesc">
    <!-- 简介 -->
    <div class="desc">
      <h3>{{ singerName }}简介</h3>
      <p class="briefDesc">{{ desc.briefDesc }}</p>
    </div>
    <!-- 经历 -->
    <div class="experience">
      <div
        class="experience-item"
        v-for="(item, index) in desc.introduction"
        :key="index"
      >
        <h3>{{ item.ti }}</h3>
        <p v-for="(item, index) in formatText(item.txt)" :key="index">
          {{ item }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getArtistdesc } from "@/api/singer.js";
export default {
  name: "SingerDesc",
  components: {},
  props: {
    singerName: {
      type: String
    }
  },
  data() {
    return {
      desc: ""
    };
  },
  computed: {},
  watch: {
    $route() {
      this.desc = "";
      this.getArtistdesc();
    }
  },
  created() {
    // 获取歌手描述
    this.getArtistdesc();
  },
  mounted() {},
  methods: {
    // 获取歌手描述
    async getArtistdesc() {
      const { data } = await getArtistdesc({
        id: this.$route.query.id
      });
      this.desc = data;
    },
    formatText(text) {
      let newText = text.split("\n");
      return newText;
    }
  }
};
</script>

<style scoped lang="scss">
.singerdesc {
  margin-bottom: 5rem;
  h3 {
    padding: 0.625rem 0;
  }
  .desc {
    .briefDesc {
      line-height: 1.875rem;
      padding: 0.625rem 0;
      text-indent: 2em;
      color: #666;
    }
  }
  .experience {
    .experience-item {
      p {
        line-height: 1.875rem;
        margin-top: 0.5rem;
        text-indent: 2em;
        color: #666;
      }
    }
  }
}
</style>
